---
title: Κουμπιά
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Μια λίστα κουμπιών και ομάδων κουμπιών που χρησιμοποιούνται σε όλη την εφαρμογή.

## Κουμπί

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες     | Τύπος                 | Περιγραφή                                                                                                                                                 |
| ------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| όνομαΚλάσης   | αλφαριθμητικό         | Προαιρετικό όνομα κλάσης για επιπλέον στυλ                                                                                                                |
| Εικονίδιο     | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί                                                                                                 |
| τίτλος        | αλφαριθμητικό         | Το περιεχόμενο κειμένου του κουμπιού                                                                                                                      |
| πλήρες πλάτος | boolean               | Ορίζει αν το κουμπί πρέπει να καταλαμβάνει όλο το πλάτος του κοντέινερ του                                                                                |
| "variant"     | αλφαριθμητικό         | The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`                                            |
| μέγεθος       | αλφαριθμητικό         | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο`                                                          |
| θέση          | αλφαριθμητικό         | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `δεξί`, και `μεσαίο` |
| τονισμός      | αλφαριθμητικό         | The accent color of the button. Options include: `default`, `blue`, and `danger`                                          |
| σύντομα       | boolean               | Δείχνει αν το κουμπί είναι χαρακτηρισμένο ως "σύντομα" (π.χ. για επερχόμενες λειτουργίες)              |
| disabled      | boolean               | Καθορίζει αν το κουμπί είναι απενεργοποιημένο ή όχι                                                                                                       |
| εστίαση       | boolean               | Καθορίζει αν το κουμπί έχει εστίαση                                                                                                                       |
| onClick       | συνάρτηση             | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί                                                                  |

</Tab>

</Tabs>

## Ομάδα Κουμπιών

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Ιδιότητες          | Τύπος                 | Περιγραφή                                                                                                                                             |
| ------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| όνομαΚλάσης        | αλφαριθμητικό         | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                                |
| Εικονίδιο          | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί                                                                                             |
| τίτλος             | αλφαριθμητικό         | Το περιεχόμενο κειμένου του κουμπιού                                                                                                                  |
| μέγεθος            | αλφαριθμητικό         | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο`                                                      |
| θέση               | αλφαριθμητικό         | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `μεσαίο`, `δεξί` |
| εφαρμογή σκιάς     | boolean               | Καθορίζει αν θα εφαρμοστεί σκιά σε ένα κουμπί                                                                                                         |
| εφαρμογή θολότητας | boolean               | Determines whether to apply a blur effect to the button                                                                                               |
| disabled           | boolean               | Καθορίζει αν το κουμπί είναι απενεργοποιημένο                                                                                                         |
| εστίαση            | boolean               | Δείχνει αν το κουμπί έχει εστίαση                                                                                                                     |

</Tab>
</Tabs>

## Ομάδα Πλωτών Κουμπιών

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες | Τύπος         | Περιγραφή                                                                                        | Προεπιλογή |
| --------- | ------------- | ------------------------------------------------------------------------------------------------ | ---------- |
| μέγεθος   | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` | μικρό      |
| παιδιά    | ReactNode     | An array of React elements representing the individual buttons within the group                  |            |

</Tab>

</Tabs>

## Πλωτό Εικονίδιο Κουμπιού

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες          | Τύπος                 | Περιγραφή                                                                                                                                                 |
| ------------------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| όνομαΚλάσης        | αλφαριθμητικό         | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                                    |
| Εικονίδιο          | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί                                                                                                 |
| μέγεθος            | αλφαριθμητικό         | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο`                                                          |
| θέση               | αλφαριθμητικό         | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `δεξί`, και `μεσαίο` |
| εφαρμογή σκιάς     | boolean               | Καθορίζει αν θα εφαρμοστεί σκιά σε ένα κουμπί                                                                                                             |
| εφαρμογή θολότητας | boolean               | Determines whether to apply a blur effect to the button                                                                                                   |
| disabled           | boolean               | Καθορίζει αν το κουμπί είναι απενεργοποιημένο                                                                                                             |
| εστίαση            | boolean               | Δείχνει αν το κουμπί έχει εστίαση                                                                                                                         |
| onClick            | συνάρτηση             | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί                                                                  |
| είναι ενεργό       | boolean               | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης                                                                                               |

</Tab>

</Tabs>

## Ομάδα Πλωτών Εικονιδίων Κουμπιών

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Ιδιότητες         | Τύπος         | Περιγραφή                                                                                                                                                                                                                                                                                                                 |
| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| όνομαΚλάσης       | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                                                                                                                                                                                                    |
| μέγεθος           | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο`                                                                                                                                                                                                                          |
| κουμπιάΕικονιδίων | σειρά         | An array of objects, each representing an icon button in the group. Κάθε αντικείμενο θα πρέπει να περιλαμβάνει το εικονίδιο που θέλετε να εμφανιστεί στο κουμπί, τη λειτουργία που θέλετε να καλέσετε όταν ο χρήστης κάνει κλικ στο κουμπί και αν το κουμπί πρέπει να είναι ενεργό ή όχι. |

</Tab>

</Tabs>

## Light Button

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες   | Τύπος             | Περιγραφή                                                                                                                |
| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------ |
| όνομαΚλάσης | αλφαριθμητικό     | Προαιρετική ονομασία για επιπλέον στυλ                                                                                   |
| εικονίδιο   | `React.ReactNode` | Το εικονίδιο που θέλετε να εμφανιστεί στο κουμπί                                                                         |
| τίτλος      | αλφαριθμητικό     | Το περιεχόμενο κειμένου του κουμπιού                                                                                     |
| τονισμός    | αλφαριθμητικό     | The accent color of the button. Οι επιλογές περιλαμβάνουν: `δευτερεύον` και `τριτογενές` |
| ενεργό      | boolean           | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης                                                              |
| disabled    | boolean           | Καθορίζει αν το κουμπί είναι απενεργοποιημένο                                                                            |
| εστίαση     | boolean           | Δείχνει αν το κουμπί έχει εστίαση                                                                                        |
| onClick     | συνάρτηση         | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί                                 |

</Tab>

</Tabs>

## Light Icon Button

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες   | Τύπος                 | Περιγραφή                                                                                                                |
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| όνομαΚλάσης | αλφαριθμητικό         | Προαιρετική ονομασία για επιπλέον στυλ                                                                                   |
| testId      | αλφαριθμητικό         | Αναγνωριστικό δοκιμής για το κουμπί                                                                                      |
| Εικονίδιο   | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί                                                                |
| τίτλος      | αλφαριθμητικό         | Το περιεχόμενο κειμένου του κουμπιού                                                                                     |
| μέγεθος     | αλφαριθμητικό         | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο`                         |
| τονισμός    | αλφαριθμητικό         | The accent color of the button. Οι επιλογές περιλαμβάνουν: `δευτερεύον` και `τριτογενές` |
| ενεργό      | boolean               | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης                                                              |
| disabled    | boolean               | Καθορίζει αν το κουμπί είναι απενεργοποιημένο                                                                            |
| εστίαση     | boolean               | Δείχνει αν το κουμπί έχει εστίαση                                                                                        |
| onClick     | λειτουργία            | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί                                 |

</Tab>

</Tabs>

## Main Button

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες                  | Τύπος                            | Περιγραφή                                                                                                                                    |
| -------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| τίτλος                     | αλφαριθμητικό                    | Το περιεχόμενο κειμένου του κουμπιού                                                                                                         |
| πλήρες πλάτος              | boolean                          | Ορίζει αν το κουμπί πρέπει να καταλαμβάνει όλο το πλάτος του κοντέινερ του                                                                   |
| "variant"                  | αλφαριθμητικό                    | The visual style variant of the button. Οι επιλογές περιλαμβάνουν `πρωτεύον` και `δευτερεύον`                                |
| σύντομα                    | boolean                          | Δείχνει αν το κουμπί είναι χαρακτηρισμένο ως "σύντομα" (π.χ. για επερχόμενες λειτουργίες) |
| Εικονίδιο                  | `React.ComponentType`            | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί                                                                                    |
| React `ιδιότητες κουμπιού` | `React.ComponentProps<'button'>` | Υποστηρίζονται όλες οι ιδιότητες τυπικού κουμπιού HTML                                                                                       |

</Tab>

</Tabs>

## Rounded Icon Button

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες                  | Τύπος                                           | Περιγραφή |
| -------------------------- | ----------------------------------------------- | --------- |
| Εικονίδιο                  | `React.ComponentType`                           |           |
| React `ιδιότητες κουμπιού` | `React.ButtonHTMLAttributes<HTMLButtonElement>` |           |

</Tab>

</Tabs>
